<template>
  <z-paging
    ref="paging"
    v-model="list"
    v-bind="$props"
    refresher-threshold="200rpx"
    :safe-area-inset-bottom="safeAreaInsetBottom"
    :usePageScroll="usePageScroll"
    :empty-view-img="emptyImage"
    :empty-view-text="emptyText"
    :empty-view-img-style="emptyImageStyle"
    @query="onQuery"
  >
    <template #top>
      <slot name="top"></slot>
    </template>
    <template #bottom>
      <slot name="bottom"></slot>
    </template>
    <template #left>
      <slot name="left"></slot>
    </template>
    <template #right>
      <slot name="right"></slot>
    </template>

    <template #default>
      <slot />
    </template>
  </z-paging>
</template>
<script>
export default {
  name: 'z-paging-list',
}
</script>
<script setup>
const props = defineProps({
  modelValue: Array,
  usePageScroll: {
    type: Boolean,
    default: false,
  }, 
  safeAreaInsetBottom: {
    type: Boolean,
    default: true,
  },
  emptyImage: {
    type: String,
    default: '/static/images/empty/img_empty.png',
  },
  emptyImageStyle: {
    type: [Object, String],
    default: () => {
      return {
        width: '228rpx',
        height: '228rpx',
      }
    },
  },
  emptyText: {
    type: String,
    default: '暂无数据',
  },
  config: {
    type: Object,
    default: () => {}
  },
})
const emit = defineEmits(['loadData', 'update:modelValue'])

const paging = ref()
const list = ref(props.modelValue)
watch(
  list,
  newVal => {
    emit('update:modelValue', newVal)
  },
  { deep: true }
)

function onRefresh() {
  paging.value && paging.value.reload()
}

function onRefreshCurrentPage () {
  paging.value && paging.value.refresh()
}

function onClear() {
  paging.value && paging.value.clear()
}

function onLoadResult(dataList) {
  paging.value && paging.value.complete(dataList)
}

function onQuery(pageNo, pageSize) {
  emit('loadData', pageNo)
}

function onPageScroll(e) {
  const scrollTop = e.scrollTop
  paging.value && paging.value.updatePageScrollTop(scrollTop)

  if (scrollTop < 10) {
    paging.value && paging.value.doChatRecordLoadMore()
  }
}

onPullDownRefresh(() => paging.value && paging.value.reload())

onReachBottom(() => paging.value && paging.value.pageReachBottom())

defineExpose({
  onLoadResult,
  onPageScroll,
  onRefresh,
  onRefreshCurrentPage,
  onClear,
})
</script>
